<!-- HTML5 Playground
File:	hardware.html
Author: Nagendra U M
 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link href="../theme/css/main.css" type="text/css" rel="stylesheet">
	<link href="../theme/css/hardware.css" type="text/css" rel="stylesheet">
	<script src="../js/thirdparty/modernizr.min.js" type="text/javascript"></script>
	<script src="../js/thirdparty/jquery-1.7.2.min.js"></script>
	<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script src="../js/main.js"  type="text/javascript"></script>
	<script src="../js/hardware.js" type="text/javascript" ></script>
	<title>HTML5 Playground - Nagendra U M - File/Hardware Access Demo</title>
</head>
<body onload="$('#textinfo').hide(); $('#maparea').hide(); $('#fileListDiv').hide(); $('#dialog-form').hide(); $('#webcamStream').hide(); $('#cameraSnapshotButton').hide();">
	<header class="main-header">
		<hgroup>
			<table style="width: 100%">
				<tr>
					<td style="width: 15%;"><img src="../theme/images/html5logo.png"></td>
					<td style="width: 85%; text-align: center;">
						<h1>HTML5 Playground</h1>
						<h3>File/Hardware Access Features</h3>
					</td>
				</tr>
			</table>
		</hgroup>
	</header>
	<nav>
		<ul>
			<li><a href="storage.html">Offline/Storage</a></li>
			<li><a href="communication.html">Realtime/Communication</a></li>
			<li><a href="hardware.html">File/Hardware Access</a></li>
			<li><a href="semantics.html">Semantics and Markup</a></li>
			<li><a href="multimedia.html">Graphics/Multimedia</a></li>
			<li><a href="misc.html">Misc.</a></li>
		</ul>
	</nav>
	<section id="geolocationDemo">
		<article id="geolocation">
			<header>
				<h2>Geolocation</h2>
			</header>
			<input type="button" onclick="getLocation()" value="Where am I?" class = "styled-button"/>
			<br/>
			<div id="textinfo" class="text-info">
				Latitude:&nbsp;<span id="latitude" class="text-info-values"></span><br/>
				Longitude:&nbsp;<span id="longitude" class="text-info-values"></span><br/>
				Accuracy: +/-<span id="accuracy" class="text-info-values"></span>&nbsp;meters<br/>
			</div>
			<br/>
			<div id="maparea" class="map-area"></div>
			<br/>
		</article>
	</section>
	<section id="filesystemAPIDemo">
		<article id="filesystemAPI">
			<header>
				<h2>Filesystem API</h2>
			</header>
			<table class="full-width-table">
				<tr>
					<td style="vertical-align: top;float: left;">
						<label for="filesystemSize">How much (MB) filesystem quota do you want for this application?:</label>
						<input type="number" id="filesystemSize" size="2" maxlength="2" min="1" max="20"/>
						<br/>
						<input type="button" onclick="requestAppQuota()" value="Request Quota" class = "styled-button"/>
						<input type="button" onclick="createFileSystem()" value="Create File System" class="styled-button"/>
						<br/><br/>
						<div id="dropzone"  ondragenter="handleFileDragEnter(event)" ondrop="handleFileDrop(event)" ondragleave="handleDragLeave(event)">
						Drag and drop files from your desktop here !!
						</div>
					</td>
					<td style="vertical-align: top;float: right;">
						<input type="button" onclick="populateDirectoryListing()" value="List Files" class="styled-button"/>
						<div id="fileListDiv" class="text-info">
							<span class="text-info-values">File System</span>
							<br/><br/>
							<span id="fileList"><!-- File listing populated here via js --></span>
						</div>
					</td>
				</tr>
			</table>
		</article>
	</section>
	<section id="userMediaAPIDemo">
		<article id="webcamInput">
			<header>
				<h2>Device Control (UserMedia) API</h2>
			</header>
				<video id="webcamStream" autoplay="autoplay" width="600px" height="450px"></video>
				<br/>
				<input id = "cameraStreamButton" type="button" onclick="streamWebcam()" value="Camera Stream" class="styled-button"/>
				<input id = "cameraSnapshotButton" type="button" onclick="exportSnapshot()" value="Click Photograph" class="styled-button"/>
				<canvas id = "cameraSnapshotCanvas" style="width: 600px; height: 450px; display: none;"><!-- Hidden canvas to hold snapshot and export it --></canvas>
		</article>
	</section>

	<footer>
		<p>&#169; 2012 <a href="http://gplus.to/umnagendra">Nagendra U M</a></p>
		<img alt="Powered by HTML5" src="../theme/images/html5badge.png" title="Powered by HTML5">
	</footer>
	
	<!-- popup div to show file contents -->
	<div id="blanket" style="display:none"></div>
	<div id="popUpDiv" style="display:none"></div>
	
</body>
</html>